import {
    Breadcrumb,
    Input, Progress,
    Button, message,
    Select, Popconfirm,
    Table, Space, Modal
} from 'antd'
import { ReloadOutlined } from '@ant-design/icons'
import styles from '@/pages/page/index.less'
import CommonFooter from '@/components/CommonFooter';
import React, { useEffect, useState } from 'react';
import { Link, useDispatch, useSelector } from 'umi';
import { PageModelState } from '@/models/page';
import { IPageType } from '@/types';
const classnames = require('classnames')
const { Option } = Select;

function Page() {
    // Hook 分发 action 方法
    const dispatch = useDispatch();

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            render: (text: any) => <a>{text}</a>,
        },
        {
            title: '路径',
            dataIndex: 'path',
            key: 'path',
        },
        {
            title: '顺序',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '阅读量',
            key: 'views',
            dataIndex: 'views',
            render: (views: any) => (
                <p className={styles.viewStyle}>
                    {views}
                </p>
            )
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: any) => (
                <p>
                    {
                        status === 'publish' ? <p> <span className={styles.dotGreen}></span> 已发布</p> : <p> <span className={styles.dotYellow}></span> 草稿</p>
                    }
                </p>
            )
        },
        {
            title: '发布时间',
            dataIndex: 'publishAt',
            key: 'publishAt',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: IPageType, record: IPageType) => (

                <Space size="middle" className={styles.actionStyle}>

                    <a style={styles.edit}>编辑</a>
                    <a style={styles.downline}
                        onClick={async () => {
                            await dispatch({
                                type: 'page/changePageStatus',
                                payload: {
                                    status: text.status === 'publish' ? 'draft' : 'publish', id: text.id
                                }
                            })
                            await dispatch({
                                type: 'page/getPageList',
                                payload: page
                            })
                        }}
                    >{text.status === 'publish' ? '下线' : '发布'}</a>
                    <a style={styles.watch} onClick={showModal}>查看访问</a>
                    <Popconfirm placement="top" title={'确认删除？'}
                        okText="确认" cancelText="取消" onConfirm={() => delfirm(text)} >
                        <a style={styles.del}>删除</a>
                    </Popconfirm>

                    <Modal title="访问统计" visible={isModalVisible} onCancel={handleCancel} footer={null}>
                        <Progress
                            strokeColor={{
                                '0%': '#108ee9',
                                '100%': '#87d068',
                            }}
                            percent={text.order / 100}
                        />
                    </Modal>
                </Space>
            ),
        },
    ];
   


   

    // 弹出框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 删除接口
    async function delfirm(text: IPageType) {
        await dispatch({
            type: 'page/delPageList',
            payload: text.id
        })

        await dispatch({
            type: 'page/getPageList',
            payload: page
        })

    }
    // 全选单选
    // 设置多选框
    const [selectedRowKeys, changeSelectedRowKeys] = useState([])

    // 设置多选框联动效果按钮展示
    const [show, setShow] = useState(false)
    // 改变多选框
    function onSelectChange(selectedRowKeys: any) {
        changeSelectedRowKeys(selectedRowKeys);
        if (selectedRowKeys.length) {
            setShow(true);

        } else {
            setShow(false)
        }
    };
    // 将单选框赋值
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: false
    };
    // 批量删除
    // 批量删除
    function delAls (){
        selectedRowKeys.length && selectedRowKeys.map((item: any) => {
            dispatch({
               type: 'page/delPageList',
               payload: item
           })
           dispatch({
            type: 'page/getPageList',
            payload: page
            })
       })
    }

    async function confirm() {
        delAls();
       message.success('删除成功');
       setShow(false)
    }

   

const btnText = ['发布', '下线', '删除']
const [ind, setInd] = useState(0);
function changeOn(index: number) {
    setInd(index)
}

// 分页配置
const paginationProps: any = {
    onChange: (page: number) => handlePageChange(page), //改变页码的函数   
}
// 获取当前页码
const [page, setPage] = useState(1);
function handlePageChange(page: number) {
    setPage(page);
}
// 请求页面数据  
useEffect(() => {
    dispatch({
        type: 'page/getPageList',
        payload: page
    })
}, [page])

// 获取pageList数据
const { pageList } = useSelector((state: { page: PageModelState }) => state.page);
const newList = JSON.parse(JSON.stringify(pageList));

const obj = [] as any;
newList.forEach((item: any, index: number) => {
    obj.push({
        content: item.content,
        cover: item.cover,
        createAt: item.createAt,
        html: item.html,
        id: item.id,
        name: item.name,
        order: item.order,
        path: item.path,
        publishAt: item.publishAt,
        status: item.status,
        toc: item.toc,
        updateAt: item.updateAt,
        views: item.views,
        key: item.id
    })
})

return <div className={styles.page}>
    <div className={styles.top}>
        <Breadcrumb>
            <Breadcrumb.Item>
                <a href="/">工作台</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>页面管理</Breadcrumb.Item>
        </Breadcrumb>
    </div>
    <div className={styles.main}>
        <div className={styles.search}>
            <div className={styles.form}>
                <div>
                    <div>
                        <div>
                            <label htmlFor="pageTile">名称:</label>
                        </div>
                        <div>
                            <Input type="text" placeholder='请输入页面名称' id='pageTile' />
                        </div>
                    </div>
                    <div>
                        <div>
                            <label htmlFor="pagePath">路径:</label>
                        </div>
                        <div>
                            <Input type="text" placeholder='请输入路径名称' id='pagePath' />
                        </div>
                    </div>
                    <div>
                        <div>
                            <label htmlFor="pageStatus">状态:</label>
                        </div>
                        <div>
                            <Select defaultValue="" style={{ width: '190px' }}>
                                <Option value="已发布">已发布</Option>
                                <Option value="草稿">草稿</Option>
                            </Select>
                        </div>
                    </div>
                </div>

                <div className={styles.btns}>
                    <Button type='primary'>
                        <span>搜索</span>
                    </Button>
                    <Button>
                        <span>重置</span>
                    </Button>
                </div>
            </div>

        </div>
        <div className={styles.con}>
            <div className={styles.con_top}>
                {show && <div className={styles.btnsLeft}>
                    {
                        btnText.length && btnText.map((item: string, index: number) => {
                            if (item === '删除') {
                                return <Popconfirm placement="top" title={'确认删除？'} key={index}
                                    okText="确认" cancelText="取消" onConfirm={confirm} >
                                    <Button className={ind === index ? classnames(styles.on, styles.equal) : styles.equal} onClick={() => changeOn(index)}>{item}</Button>
                                </Popconfirm>
                            } else {
                                return <button
                                    className={ind === index ? styles.on : ''}
                                    onClick={() => changeOn(index)}
                                    key={index}>{
                                        item
                                    }</button>
                            }
                        })

                    }
                </div>}
                <div className={styles.btnsRight}>
                    <Button type='primary'>
                        <Link to={'/page/editor'}>+ 新建</Link>
                    </Button>
                    <span><ReloadOutlined /></span>
                </div>
            </div>
            <div className={styles.con_table}>
                <Table columns={columns} dataSource={obj} rowSelection={rowSelection} pagination={paginationProps}
                />
            </div>
        </div>
        <div>
            <CommonFooter></CommonFooter>
        </div>
    </div>

</div>
}
export default Page



